<template>
  <div class="error_page">
    <div class="error_group">
      <img class="error_icon" src="@/assets/images/404.png" alt="" />
      <p>糟糕！！很抱歉找不到该页页了！</p>
      <div class="btn_group">
        <span class="go_back_btn" @click="$router.go(-1)">返回首页</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Error",
};
</script>

<style lang="scss" scoped>
.error_page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .error_group {
    width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    text-align: center;
    color: #999;
    .error_icon {
      width: 100%;
      object-fit: cover;
    }
    .btn_group {
      margin-top: 10px;
      .go_back_btn {
        background: #999;
        color: #fff;
        padding: 5px 20px;
        border-radius: 10px;
        margin-top: 10px;
        font-weight: 700;
        cursor: pointer;
      }
    }
  }
}
</style>